<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../../css/common.css" />
		<link rel="stylesheet" type="text/css" href="./css/index.css" />
	</head>

	<body>
		<!-- 购物车 -->
		<div class="mui-content">
			<div class="cart-list">
				<div class="cart-list-item">
					<div class="checkbox-content">
						<img src="../../images/cart/icon_common_choice_unselected.png" class="common_choice unselected">
						<img hidden src="../../images/cart/icon_common_choice_selected.png"
							class="common_choice selected">
					</div>
					<div class="recommend-list-item">
						<img src="../../images/home/demo.jpg" class="recommend-img">
						<div class="recommend-info">
							<div  class="goods-info">
								<span class="goods-title">欧莱雅黑精华抗衰老紧致补水保湿精华液官方正品50mL 今日下单即赠新品...</span>
								<span class="goods-code">编号:1234</span>
							</div>
							
							<div class="goods-last">
								<span class="goods-price">￥<span class="fuhao">69.80</span></span>
								<!-- 计数器插件 -->
								<!-- data-numbox-min 最大值  data-numbox-max 最小值-->
								<div class="mui-numbox" data-numbox-min='1' data-numbox-max='9998'>
									<button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
									<input id="test" class="mui-input-numbox" type="number" value="1" disabled="disabled"/>
									<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
								</div>
							</div>
				
						</div>
					</div>
				</div>
				<div class="cart-list-item">
					<div class="checkbox-content">
						<img src="../../images/cart/icon_common_choice_unselected.png" class="common_choice unselected">
						<img hidden src="../../images/cart/icon_common_choice_selected.png"
							class="common_choice selected">
					</div>
					<div class="recommend-list-item">
						<img src="../../images/home/demo.jpg" class="recommend-img">
						<div class="recommend-info">
							<div  class="goods-info">
								<span class="goods-title">欧莱雅黑精华抗衰老紧致补水保湿精华液官方正品50mL 今日下单即赠新品...</span>
								<span class="goods-code">编号:1234</span>
							</div>
							
							<div class="goods-last">
								<span class="goods-price">￥<span class="fuhao">69.80</span></span>
								<!-- 计数器插件 -->
								<!-- data-numbox-min 最大值  data-numbox-max 最小值-->
								<div class="mui-numbox" data-numbox-min='1' data-numbox-max='9998'>
									<button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
									<input id="test" class="mui-input-numbox" type="number" value="1" disabled="disabled"/>
									<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
								</div>
							</div>
				
						</div>
					</div>
				</div>
				
			</div>
		</div>
		
		<!-- hidden 隐藏元素 无数据时展示-->
		<div class="no-cart">
			<img src="../../images/cart/icon_default_shoppingcart.png" class="shoppingcart">
		</div>
		<!-- 操作栏 -->
		<div class="cart-edit-content">
			<div id="admin" class="cart-edit-left">
				<img src="../../images/cart/icon_shoppingcart_edit.png" class="icon_shoppingcart">
				<span>管理</span>
			</div>
			<div hidden id="cancel" class="cart-edit-left">
				<img src="../../images/cart/icon_shoppingcart_cancel.png" class="icon_shoppingcart">
				<span>取消</span>
			</div>
			<div id="buy-edit" class="cart-edit-right">
				<div class="total-price">
					<span>合计:</span>
					<span class="price">￥<span class="total-price-num">2990.00</span>
				</div>
				<div class="buy-btn">
					去结算
				</div>
			</div>
			<div hidden id="cart-edit" class="cart-edit-right">
				<div class="add-col edit-btn">
					加入收藏夹
				</div>
				<div class="remove-cart edit-btn">
					移出购物车
				</div>
			</div>
		</div>
		<!-- 底部tab -->
		<nav class="mui-bar mui-bar-tab">
			<span class="mui-tab-item" onclick="goHome()">
				<img src="../../images/tabbar/icon_label_home_unselected.png" class="tabbar-img">
				<span class="mui-tab-label">艾沃商城</span>
			</span>
			<span class="mui-tab-item " onclick="goHeadlines()">
				<img src="../../images/tabbar/icon_label_news_unselected.png" class="tabbar-img">
				<span class="mui-tab-label">艾沃头条</span>
			</span>
			<span class="mui-tab-item  mui-active" onclick="goCart()">
				<img src="../../images/tabbar/icon_label_shoppingcart_selected.png" class="tabbar-img">
				<span class="mui-tab-label">购物车</span>
			</span>
			<span class="mui-tab-item" onclick="goMine()">
				<img src="../../images/tabbar/icon_label_mine_unselected.png" class="tabbar-img">
				<span class="mui-tab-label">我的</span>
			</span>
		</nav>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/resize.js"></script>
		<script type="text/javascript">
			// mui.init()
			// 文档一加载就执行
			$(document).ready(function() {
				obj.setRem()
			})
			// 窗口调节
			$(window).resize(function() {
				obj.setRem()
			});
			function goHeadlines() {
				window.location.href = '../headlines/index.html'
			}

			function goHome() {
				window.location.href = '../home/index.html'
			}

			function goCart() {
				window.location.href = '../cart/index.html'
			}

			function goMine() {
				window.location.href = '../mine/index.html'
			}
			$(function($) {
				/* 隐藏无商品div */
				$('.no-cart').hide();
				// 选中
				$('.cart-list-item').on('click', '.unselected', function() {
					$(this).hide();
					$(this).next().show();
				})
				// 取消选中
				$('.cart-list-item').on('click', '.selected', function() {
					console.log(this);
					$(this).hide();
					$(this).prev().show();
				})
				// 管理
				$('#cancel').hide();
				$('#cart-edit').hide();
				$('#admin').click(function(){
					// buy-edit
					$(this).hide();
					$('#buy-edit').hide();
					$('#cancel').show();
					$('#cart-edit').show();
				})
				// 取消
				$('#cancel').click(function(){
					// buy-edit
					$(this).hide();
					$('#buy-edit').show();
					$('#admin').show();
					$('#cart-edit').hide();
				})
				// 去结算
				$('.buy-btn').click(function(){
					window.location.href='./pages/orders/index.html';
				})
			});
		</script>
	</body>

</html>
